<template>
  <div class="container">
    <div class="left">
      <el-row :gutter="10">
        <el-col :span="16">
          <div class="left" style="margin-left: 20px">
            <h3 style="margin: 0 0 10px 0">好句分享</h3>
            <div class="juzi">
              <div class="top">随机好句</div>
              <div class="neirong">{{ alertTitle }}</div>
              <div class="bottom">
                <Edit />
              </div>
            </div>
            <h3 style="margin: 10px 0">推荐学习网站</h3>
            <div class="collecting">
<!--              <div class="box" v-for="(item, index) in links" :key="index">-->
<!--                <div class="left">-->
<!--                  <div class="small_box">-->
<!--                    <span style="color: orange">{{ item.name }}</span>-->
<!--                    <span style="color: #EDEDED">—————————</span>-->
<!--                    <a target="_Blank" :href="item.url" class="wrap" style="color: #ADB1B4">{{ item.url }}</a>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="right">-->
<!--                  <div class="img">-->
<!--                    <img :src="item.img" alt="">-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
              <div class="box">
                <div class="left">
                  <div class="small_box">
                    <span style="color: orange">百度</span>
                    <span style="color: #EDEDED">—————————</span>
                    <a target="_Blank" href="#" class="wrap" style="color: #ADB1B4">www.baidu.com</a>
                  </div>
                </div>
                <div class="right">
                  <div class="img">
                    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.W-DWMtWp7pRH3XLx3Viu_wAAAA&w=80&h=80&c=1&vt=9&bgcl=dd15b1&r=0&o=6&pid=5.1" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="right">
            <h3 style="margin: 0 15px">日历</h3>
            <div>
              <el-calendar v-model="value"></el-calendar>
            </div>
            <h3 style="margin: 15px">时间线</h3>
            <div class="timeline">
              <el-timeline>
                <el-timeline-item timestamp="8:00-8:30" placement="top">
                  <el-card>
                    <div class="contents">
                      <h4>洗漱吃饭</h4>
                    </div>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="8:30-12:00" placement="top">
                  <el-card>
                    <div class="contents">
                      <h4>学习</h4>
                    </div>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="12:00-1:30" placement="top">
                  <el-card>
                    <div class="contents">
                      <h4>吃饭午睡</h4>
                    </div>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="1:30-18:00" placement="top">
                  <el-card>
                    <div class="contents">
                      <h4>学习</h4>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <studentBoard v-if="userInfo.level === 2"></studentBoard>
    <teacherBoard v-if="userInfo.level === 1"></teacherBoard>
    <admin-board v-if="userInfo.level === 0"></admin-board> -->
  </div>
</template>

<script setup>
// import studentBoard from "./student-dashboard";
// import teacherBoard from "./teacher-dashboard";
// import adminBoard from "./admin-dashboard";
// import { reqLinks } from '@/api/curriculum'
import {Edit} from '@element-plus/icons-vue'
import { ref } from 'vue'
const value = ref(new Date())

let alertArr = [
  '事业之舟驶到了理想的彼岸。读书是最好的学习，追随伟大人物的思想，是富有趣味的事情。',
  '学问是异常珍贵的东西，从任何源泉吸收都不可耻。',
  '我无所事事的度过的今天是昨天死去的人所奢望的明天。',
  '喜爱读书，就等于把生活中寂寞无聊的时光换成巨大享受的时刻。',
  '学到很多东西的诀窍，就是一下子不要学很多。',
  '我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知',
  '读书和学习是在别人思想和知识的帮助下，建立起自己的思想。',
  '书籍是人类进步的阶梯。',
  '读书是最好的学习，追随伟大人物的思想，是富有趣味的事情。',
  '读万卷书，行万里路。'
]
let alertTitle = ''
let links = []
const getAlert = () => {
  let i = Math.floor(Math.random() * 10)
  alertTitle = alertArr[i]
}
getAlert()
</script>

<style scoped>
.container {
  background-color: #ffffff;
  padding: 15px;
}

:deep(.el-calendar)  {
  width: 350px;
  height: 350px;
}

:deep(.el-calendar__body)  {
  width: 400px;
  height: 350px;
  padding: 0;
}

:deep(.el-calendar-table)  {
  width: 360px;
  height: 307px;
}

:deep(.el-calendar-day) {
  height: 41px !important;
}

:deep(.el-card__body)  {
  height: 60px;
  width: 330px;
  background-color: #f9f9fa;
}

:deep(.el-timeline-item__content) {
  width: 330px;
}

.img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.contents {
  display: flex;
  align-items: center;
  padding-left: 10px;

}

.bottom {
  width: 20px;
  height: 20px;
  margin-bottom: 20px;
}

.alert {
  margin-bottom: 15px;
}

.collecting {
  display: flex;
  flex-wrap: wrap;
}

.collecting .box {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  margin: 5px;
}

.collecting .box .left {
  margin-left: 15px;
}

.collecting .box .img img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid gray;
}

.small_box {
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.juzi {
  margin-left: 5px;
  width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #528DAB;
}

.top {
  margin-top: -15px;
  font-size: 20px;
  font-weight: bold;
  width: 150px;
  text-align: center;
  background-color: #fff;
  color: #79797A;
}

.neirong {
  font-size: 18px;
  margin: 25px;
  color: #A59796;
}

.contents {
  line-height: 62px;
}
</style>